<template>
  <div class="h-layout">
    <div class="h-body">
      <router-view></router-view>
    </div>
    <div class="footer-nav">
      <template v-for="(n, i) of nav" :key="i">
        <div :class="{ activeTab: n.path === activeTabs }" @click="changeTabs(n, i)" style="z-index: 999">
          <div class="icon">
            <div class="background"></div>
            <hcSvg :name="n.meta.icon" :size="20" />
          </div>
          <div class="text">{{ t("router." + n.name) }}</div>
        </div>
      </template>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import userStore from "@/store/userStore";
import { useI18n } from "vue-i18n";

const store = userStore();
const route = useRoute();
const router = useRouter();
const { t } = useI18n();

let activeTabs = computed(() => route.path);
let nav = computed(() => store.frontMenus);

function changeTabs(item) {
  router.push(item.path);
}
</script>
<style scoped lang="scss">
.h-layout {
  width: 100%;
  height: 100%;
  // overflow: hidden;
  // background-color: #14142b;
  background-color: rgba(0, 0, 0, 0.45);
  .h-body {
    width: 100%;
    height: calc(100% - 80px);
    // padding: 10px;
  }
  .footer-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: 100px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #0084fe;
      margin: 10px;
      margin-bottom: 0;
      cursor: pointer;
      .icon {
        margin-bottom: 0px;
        .el-icon {
          color: #0084fe;
        }
      }

      &:hover,
      &.activeTab {
        color: #e5983e;
        .icon {
          transition: all 1s ease; // 添加过渡效果
          animation: rise 0.7s ease forwards; //添加动画效果
          position: relative;
          background-size: 100% auto no-repeat;
          top: 0px;
          transform: scale(1.1);

          .el-icon {
            color: #e5983e;
          }
          .background {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 40px;
            height: 40px;
            background: url("@/assets/images/nav/nav-select.png") no-repeat;
            background-size: 100% auto;
          }
        }
      }
      @keyframes rise {
        from {
          top: 0px;
        }
        to {
          top: -5px;
        }
      }
    }
    .bottom {
      position: absolute;
      min-width: 600px;
      bottom: -10px;
      width: 100%;
      height: 30px;
      background: url("@/assets/images/nav/nav-bottom.svg") no-repeat;
      background-size: 100% 100%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
</style>
